<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="referrer" content="no-referrer"/>
    <script type="text/javascript" src="./js/jquery-3.1.1.js"></script>
<!--    <link rel="stylesheet" href="/css/user.css">-->
    <link rel="stylesheet" href="/css/user1.css">
    <title>Title</title>
</head>

<body>
<!--头部-->
<header>
    <h1>星龙小说网</h1>
</header>
<!--导航栏-->
<nav class="navbar">
    <ul>
        <li><a href="/index.html">首页</a></li>
        <li><a href="/Allnovels.html">全部小说</a></li>
        <li><a href="/about.html">关于我们</a></li>
        <li><a href="/user.html">个人信息</a></li>
        <li><a href="BookCar.html">我的书单</a></li>
    </ul>
    <span class="userinfo">用户名：<span id="nikename"></span>&nbsp;<a href="http://localhost:8080/loginOut">注销</a></span>
    <span class="gotologin">请先<a href="login.html">登录</a></span>
</nav>
<div class="container">
    <div class="img"><img id="userimg" alt="未上传头像" src=""/></div>

    <div class="userinfo">
        <p>头像：</p><input type="file" onchange="upLoad()" name="file" id="file1"/><br/>
        <p>昵称:</p><input id="usernike"><br/>
        <p>密码:</p><input id="pwd"><br>
        <input onclick="updateMyInfo()" type="button" value="修改"></div>
</div>

</body>

<script>
    // jQuery入口函数
    $(function () {
        showData()
    })
    //数据显示
    function showData() {
        $.get("http://localhost:8080/getUser", null, function (data) {
            if (data.username != null) {
                console.log(data)
                $(".gotologin").hide();
                $(".userinfo").show()
                $("#nikename").text(data.nikename);
                $("#userimg").attr("src",data.userimg);
                $("#usernike").val(data.nikename);
                $("#pwd").val(data.userpassword);
            } else {
                alert("请先登录")
                location.href = "index.html"
            }
        })
    }


    // 图片上传
    function upLoad() {
        var files = document.getElementById('file1').files; // 使用原生JavaScript获取文件
        if (files.length <= 0) {
            alert('请选择文件后再上传');
            return; // 选择文件后，退出函数
        }

        var fd = new FormData();
        fd.append('file', files[0]); // 添加文件到FormData对象

        $.ajax({
            method: 'POST', // 修正为正确的POST
            url: 'http://localhost:8080/uploadImg',
            data: fd,
            processData: false,
            contentType: false,
            success: function (res) {
                alert(res);
                $("#userimg").attr("src",res); // 假设服务器返回的是图片的URL
                showuserimg(res)
            },
            error: function (xhr, status, error) {
                alert("上传失败: " + error);
            }
        });
    }

    function showuserimg(res){
        $("#userimg").attr("src",res);
    }

    // 修改个人数据
    function updateMyInfo() {
        var name = $("#nikename").val()
        var password = $("#pwd").val()
        var img = $("#userimg").attr("src")
        alert(img)
        $.get("http://localhost:8080/updateMyInfo", {"username": name, "userpassword": password, "userimg": img}, function (data) {
            alert(data)
            showData();
        })
    }
</script>
</html>